<template>
  <div>
    <h2>Home....</h2>
    <ul class="list">
      <li>
        <router-link
          :to="{
            path: '/home/news',
          }"
          >News</router-link
        >
      </li>
      <li><router-link to="/home/message">Message</router-link></li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "Home",
  props: ["sex"],
  beforeMount() {
    console.log("Home beforeMount");
  },
  mounted() {
    console.log("Home mounted");
  },
  beforeDestroy() {
    console.log("Home beforeDestroy");
  },
  // 只对被keep-alive缓存的组件生效
  activated() {
    // 激活（进入）
    console.log("Home activated");
  },
  deactivated() {
    // 未激活（离开）
    console.log("Home deactivated");
  },
};
</script>

<style scoped>
/* 
  scoped:
    作用：让样式只对当前组件生效
    具体：
      给当前组件所有元素添加一个自定义属性：data-v-xxx
      所有样式选择器都会加上一个属性选择器
        比如：
          之前： .list {}
          之后： .list[data-v-xxx] {}
      因为自定义属性data-v-xxx只有当前组件元素有，所以样式只对组件生效
 */
.list {
  display: flex;
}
</style>